<script setup>
import { ref, onMounted } from 'vue'
import { ChatDotSquare, EditPen } from '@element-plus/icons-vue'
import { elMessage } from '@/uc-element-plus/ele-message'
import { getHelpList, addFeedBack } from '@/api/user'
import { globalConfig } from '@/config'
import { fillFormValue } from '@/uc-element-plus/lib'
import mitt from '@/mitt'
const isClient = window.__TAURI__ || window.electronAPI
const visible = ref(false)
const dialogVisible = ref(false)
const submitRef = ref(null)
const helpList = ref([])
const formData = ref([
  {
    type: 'textarea',
    label: '反馈内容',
    prop: 'content',
    value: '',
    placeholder: '请输入反馈内容',
    message: '请输入反馈内容',
    maxlength: 100,
    rows: 3
  },
  {
    type: 'uploadImg',
    label: '截图附件',
    prop: 'attachment',
    value: [],
    message: '请上传截图附件',
    required: false,
    limit: 3,
    accept: '.png,.jpg,.jpeg,.gif,.x-icon,.webp',
    hostUrl: globalConfig.hostUrl,
    url: globalConfig.hostUrl + '/api/file/upload',
    dir: 'feedback'
  }
])
onMounted(() => {
  _getHelpList()
})

const _getHelpList = async () => {
  const { data } = await getHelpList({
    last_id: '',
    size: 200
  })
  helpList.value = data.list
}
const getAttachment = (arr) => {
  return arr ? JSON.parse(arr).map((item) => item.url) : []
}

// 帮助列表
const showDrawer = () => {
  visible.value = true
}
// 意见反馈弹框
const showDialog = () => {
  dialogVisible.value = true
  formData.value = fillFormValue(formData.value, { content: '', attachment: [] })
}
const confirm = async () => {
  const formItem = await submitRef.value.submitForm()
  if (!formItem) return
  formItem.attachment = formItem.attachment.length > 0 ? JSON.stringify(formItem.attachment) : ''
  await addFeedBack(formItem)
  elMessage({
    type: 'success',
    message: '提交成功'
  })
  dialogVisible.value = false
}

// 配置ip地址
const setIp = () => {
  if (isClient) {
    mitt.emit('set-ip')
  }
}
</script>
<template>
  <!--反馈弹框-->
  <uc-dialog
    v-if="dialogVisible"
    top="100px"
    v-model="dialogVisible"
    title="意见反馈"
    width="600px"
    @confirm="confirm"
  >
    <div class="p-[10px] pt-[20px]">
      <uc-form v-if="dialogVisible" ref="submitRef" v-model="formData"></uc-form>
    </div>
  </uc-dialog>
  <!--问题列表-->
  <uc-drawer
    :close-on-click-modal="true"
    top="100px"
    :isFooter="false"
    v-model="visible"
    title="常见问题"
    size="600"
  >
    <div class="flex justify-end mb-[10px]">
      <el-button text type="primary" :icon="EditPen" @click="showDialog">我要反馈</el-button>
    </div>
    <el-collapse accordion>
      <el-collapse-item
        :title="index + 1 + '. ' + item.title"
        v-for="(item, index) in helpList"
        :key="item.id"
      >
        <div class="text-[#fff] text-opacity-60 p-[6px] leading-[28px]">
          <div v-for="(_item, _index) in item.content.split('#')" :key="_index">{{ _item }}</div>
          <div class="mt-[15px]" v-if="getAttachment(item.attachment).length > 0"></div>
          <div class="flex">
            <el-image
              v-for="(_item, _index) in getAttachment(item.attachment)"
              :key="_index"
              style="width: 50px; height: 50px"
              :src="_item"
              :preview-src-list="[_item]"
              fit="cover"
            />
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="text-[#2e2e2e] p-4 text-[12px] text-center" v-if="isClient" @dblclick="setIp">
      V1.0.0
    </div>
  </uc-drawer>
  <div
    @click="showDrawer"
    class="feed-back flex flex-col justify-center items-center ml-[20px] text-[#fff] text-opacity-50 cursor-pointer hover:text-[#00C2FF]"
  >
    <el-icon size="20">
      <ChatDotSquare />
    </el-icon>
    <div class="text-[12px] scale-95 pt-[2px]">帮助反馈</div>
  </div>
</template>
<style>
.feed-back {
  z-index: 999;
  right: 0;
  top: 20px;
}
.el-dialog {
  background-color: #20222e;
  color: #fff;
}
.el-textarea {
  textarea {
    background-color: #20222e !important;
  }
}
.el-form-item__label {
  color: #fff;
  opacity: 0.8;
}
.el-dialog__title {
  color: #fff !important;
  opacity: 0.8;
}
.el-drawer {
  background-color: #20222e;
}
.el-drawer__body {
  padding-top: 0px;
}
.el-collapse {
  border: none;
}
.el-collapse-item__header {
  background-color: #20222e;
  color: #fff;
  opacity: 0.8;
  border-bottom: 1px #333 solid;
}
.el-collapse-item__content {
  padding-bottom: 10px;
}
.el-collapse-item {
  border-color: #222;
}
.el-collapse-item__wrap {
  background-color: #20222e;
  border-bottom: 1px #333 solid;
}
</style>
